<template>
	<view>
		<view class="order-tab">
			<!-- <view :class="'text ' + (file=== item.id ? 'on' : '' )"  v-for="item  in  tabList" :key=item.id
				@tap="orderTap" :data-file="item.id">
				{{item.text}}
			</view> -->
			<view :class="'text ' + (file=== '' ? 'on' : '' )" @tap="orderTap" data-file="">
				全部
			</view>
			<view :class="'text '+(file==='1'? 'on' :'')" @tap="orderTap" data-file="1">
				待支付
			</view>
			<view :class="'text '+(file==='2'? 'on' :'')" @tap="orderTap" data-file="2">
				待服务
			</view>
			<view :class="'text '+(file==='3'?'on':'')" @tap="orderTap" data-file="3">
				待完成
			</view>
			<view :class="'text '+(file==='4'?'on':'')" @tap="orderTap" data-file="4">
				已取消
			</view>
		</view>
		<view class="container">
			<view class="item" v-for="item  in  orderList" :key=item.id @tap="toOrder(item.out_trade_no)">
				<view class="info">
					<image :src="item.service_logo_image_url" mode="widthFix"></image>
					<view class="desc">
						<p style="color: #000;font-size: 32rpx;font-weight: 600;">{{item.service_name}}</p>
						<p style="color: #666;font-size: 28rpx;">{{item.hospital_name}} ({{item.area_name}}) </p>
						<!-- <p style="color: #666;font-size: 28rpx;">{{new Date(item.order_start_time).toLocaleString()}}</p> -->
						<formater :timestamp="item.starttime" format="MM-dd  hh:mm"></formater>
					</view>
				</view>
				<view
					:class="'state '+ (item.trade_state==='待支付'?'state_1':(item.trade_state==='待服务'?'state_3':(item.trade_state==='已完成'?'state_4':'state_5')))">
					{{item.trade_state}}
					<view v-if="item.trade_state==='待支付'">
						<counter style="color:#ffa200;font-size:24rpx" :second="item._exp_time"
							@counterOver="onCounterOver"></counter>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		toRaw
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const app = getApp()
	const orderList = ref({})
	onLoad(() => {
		app.globalData.utils.request({
			url: '/order/list',
			method: 'get',
			header: {
				token: uni.getStorageSync('token')
			},
			success(res) {
				orderList.value = res.data
			}
		})
	})
	onShow(() => {
		listLoading()
	})
	const tabList = [{
			text: '全部',
			id: 1
		},
		{
			text: '待支付',
			id: 2
		},
		{
			text: '待服务',
			id: 3
		},
		{
			text: '已完成',
			id: 4
		},
		{
			text: '已取消',
			id: 5
		},
	]
	// 记录当前tab
	const file = ref('')
	// 订单状态筛选
	const orderTap = (e) => {
		// console.log(e.currentTarget.dataset.file, 'e.currenttarget')
		const {
			file: curFile
		} = e.currentTarget.dataset
		console.log(e.currentTarget.dataset.file, 'file.value')
		if (curFile === file.value) return
		file.value = curFile
		console.log(file.value, 'file.value')
		listLoading()

	}
	// 订单列表加载
	const listLoading = () => {
		// 筛选调用接口
		app.globalData.utils.request({
			url: '/order/list?state=' + file.value.toString(),
			method: 'get',
			header: {
				token: uni.getStorageSync('token')
			},
			success: res => {
				orderList.value = res.data
			},
			fail: err => {
				uni.showToast({
					title: res.msg
				})
			}
		})
	}
	// 跳转至详情页
	const toOrder = (id) => {
		uni.navigateTo({
			url: '../order/order?oid=' + id
		})
	}
	// 倒计时结束后回调
	const onCounterOver = () => {
		listLoading()
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;

		.order-tab {
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.text {
				height: 100%;
				width: 100%;
				line-height: 80rpx;
				text-align: center;
				color: #999;
				font-size: 32rpx;
			}

			.on {
				color: #333;
				font-weight: 550;
				border-bottom: 4rpx solid #333;
			}
		}

		.container {
			padding: 25rpx;
			width: 100%;
			box-sizing: border-box;

			.item {
				display: flex;
				box-sizing: border-box;
				justify-content: space-between;
				align-items: center;
				padding: 25rpx;
				height: 160rpx;
				width: 100%;
				border-radius: 20rpx;
				background-color: #fff;
				margin-bottom: 20rpx;

				.info {
					display: flex;
					justify-content: space-between;
					align-items: center;

					image {
						width: 100rpx;
						margin-right: 20rpx;
					}

					.desc {}
				}

				.state {
					font-size: 30rpx;
					color: #999;
					width: 15%;
					height: 100%;
					margin-top: 15rpx;
				}

				.state_1 {
					color: #ffaa00;
				}

				.state_2 {
					color: #55aa00;
				}

				.state_3 {
					color: #55aaff;
				}

				.state_4 {
					color: #55aa00;
				}

				.state_4 {
					color: #999;
				}

			}
		}
	}
</style>